<template>
  <view class="container">
    <!-- 当前温度 -->
    <view class="current_temp">
      <view class="title">
        <view class="title_temp">45℃</view>
        <view class="title_text">实时温度</view>
      </view>
      <view class="temp" @click="goToDeviceInfoConfig"> 查看详情 </view>
    </view>

    <!-- 按钮提示语 -->
    <view class="btn_tip">
      <view class="btn_tip_text"> 停止温度 </view>
      <view class="btn_tip_text"> 启动温度 </view>
    </view>

    <!-- 加温度 -->
    <view class="add_temp">
      <view class="add_temp_01" @click="stopTemperatureAdd">+</view>
      <view class="add_temp_01" @click="startTemperatureAdd">+</view>
    </view>

    <!-- 当前温度 -->
    <view class="current_temp_numnber">
      <view class="current_num">{{ stopTemperature }}℃</view>
      <view class="current_num">{{ startTemperature }}℃</view>
    </view>

    <!-- 减温度 -->
    <view class="add_temp">
      <view class="add_temp_01" @click="stopTemperatureSub">-</view>
      <view class="add_temp_01" @click="startTemperatureSub">-</view>
    </view>

    <!-- 开关按钮 -->
    <image
      v-if="!isEdit"
      src="@/static/home/start_btn.png"
      class="switch_btn"
    />

    <!-- 间隔定时/预约定时 -->
    <view v-if="!isEdit" class="interval_time">
      <view class="interval_time_text" @click="toIntervalTime">
        <image src="@/static/home/dingshi.png" />
        <text>间歇定时</text>
      </view>
      <view
        class="interval_time_text"
        style="background: white; color: #5d5d5c"
        @click="toAppointmentTime"
      >
        <image src="@/static/home/dingshi-2.png" />
        <text>预约定时</text>
      </view>
    </view>

    <!-- 预警设置 -->
    <view v-if="!isEdit" class="warning_settings">
      <view class="warning_settings_text" @click="toWarningSettings">
        <image src="@/static/home/warn.png" />
        <text>预警设置</text>
      </view>
    </view>

    <view v-if="isEdit" class="bottom_btn" @click="confirm"> 保存 </view>
  </view>
</template>

<script>
import * as Api from "@/api/page";
import { checkLogin } from "@/core/app";
import * as UserApi from "@/api/user";

const App = getApp();

export default {
  components: {},
  data() {
    return {
      // 页面参数
      options: {},
      // 停止温度
      stopTemperature: 35,
      // 启动温度
      startTemperature: 60,
      // 是否编辑
      isEdit: false,
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.options = options;
    this.isEdit = options.isEdit == "1";
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  methods: {
    goToDeviceInfoConfig() {
      uni.navigateTo({
        url: `/pages/index/deviceInfo/config/index?id=${this.options.id}`,
      });
    },
    toIntervalTime() {
      uni.navigateTo({
        url: `/pages/index/intervalTiming/index?id=${this.options.id}`,
      });
    },
    toAppointmentTime() {
      uni.navigateTo({
        url: `/pages/index/appointmentTime/index?id=${this.options.id}`,
      });
    },
    toWarningSettings() {
      uni.navigateTo({
        url: `/pages/index/warningSettings/index?id=${this.options.id}`,
      });
    },
    startTemperatureAdd() {
      this.startTemperature = this.startTemperature + 1;
    },
    stopTemperatureAdd() {
      this.stopTemperature = this.stopTemperature + 1;
    },
    stopTemperatureSub() {
      // 最小是1
      if (this.stopTemperature > 1) {
        this.stopTemperature = this.stopTemperature - 1;
      }
    },
    startTemperatureSub() {
      // 最小是1
      if (this.startTemperature > 1) {
        this.startTemperature = this.startTemperature - 1;
      }
    },
    confirm() {
      // 返回上一页
      uni.navigateBack();
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: #f6f7fb;
  padding: 59.659rpx 46.023rpx 85.227rpx 85.227rpx;
}

.current_temp {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: start;

  .title {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-left: 214.773rpx;
  }

  .title_temp {
    font-family: "Microsoft YaHei";
    font-size: 76.705rpx;
    font-weight: 400;
    line-height: 101.233rpx;
    text-align: left;
  }

  .title_text {
    font-family: Microsoft YaHei;
    font-size: 25.568rpx;
    font-weight: 290;
    line-height: 34.006rpx;
    text-align: left;
    color: #9f9f9f;
    margin-top: 27.273rpx;
  }

  .temp {
    width: 129.545rpx;
    height: 47.727rpx;
    border-radius: 25.568rpx;
    background: #2084ff;

    font-family: "Microsoft YaHei";
    font-size: 20.455rpx;
    color: white;
    font-weight: 400;
    line-height: 27rpx;
    text-align: left;

    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.btn_tip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 28.977rpx;
  margin-right: 61.364rpx;
  margin-top: 57.955rpx;

  .btn_tip_text {
    background: #17120c;
    width: 177.273rpx;
    height: 52.841rpx;
    border-radius: 26.42rpx;

    font-family: "Microsoft YaHei";
    font-size: 25.568rpx;
    color: white;
    font-weight: 400;
    line-height: 33.75rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.add_temp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 54.545rpx;
  margin-left: 57.955rpx;
  margin-right: 98.864rpx;
}
.add_temp_01 {
  width: 107.386rpx;
  height: 107.386rpx;
  border-radius: 53.693rpx;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0rpx 1.705rpx 10.227rpx 0rpx #cde1fa;
  color: #000000;
  font-weight: 800;
}

.current_temp_numnber {
  margin-left: 52.841rpx;
  // margin-right: 52.841rpx;
  margin-right: 98.864rpx;
  margin-top: 52.841rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .current_num {
    font-family: "Microsoft YaHei";
    font-size: 51.136rpx;
    font-weight: 400;
    line-height: 67.483rpx;
    text-align: left;
    color: #000000;
  }
}

.switch_btn {
  margin-top: 83.523rpx;
  margin-left: 202.841rpx;
  width: 201.136rpx;
  height: 201.136rpx;
}

.interval_time {
  margin-top: 85.227rpx;
  margin-right: 32.386rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .interval_time_text {
    width: 276.136rpx;
    height: 86.932rpx;
    background: #60a4f7;
    box-shadow: 0rpx 1.705rpx 10.227rpx 0rpx #cde1fa;
    color: white;
    border-radius: 43.582rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 32.386rpx;
      height: 35.795rpx;
      margin-right: 17.045rpx;
    }
  }
}

.warning_settings {
  margin-top: 37.5rpx;
  margin-left: 3.409rpx;
  width: 586.364rpx;
  height: 86.932rpx;
  background: white;
  box-shadow: 0rpx 1.705rpx 10.227rpx 0rpx #cde1fa;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 43.582rpx;

  .warning_settings_text {
    display: flex;
    align-items: center;
    image {
      margin-right: 20.455rpx;
      width: 35.795rpx;
      height: 35.795rpx;
    }
  }
}

.bottom_btn { 
  height: 83.523rpx; 

  border-radius: 43.582rpx;
  background: rgba(96, 164, 247, 1);
  color: rgba(255, 255, 255, 1);

  font-family: "Microsoft YaHei";
  font-size: 25.568rpx;
  font-weight: 290;
  line-height: 34.006rpx;
  text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;

  margin-right: 59.659rpx; 

  position: fixed;
  bottom: 50px;
  width: 80%;
  left: 10%;
}
</style>
